<template>
  <div class="component-b">
      <p>
          甲方姓名（授权方）：
          <span class="readonly">{{ props.writer.real_name }}</span>
      </p>
      <p>
          甲方账号（授权方）：
          <span class="readonly">{{ props.writer.account }}</span>
      </p>
      <p>
          乙方（被授权方）：
          <span class="readonly">{{ user.real_name }}</span>
      </p>
      <p>
          乙方账号（授权方）：
          <span class="readonly">{{ user.account }}</span>
      </p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义 props
const props = defineProps({
  writer: {
      type: Object,
      required: true
  },
  user: {
      type: Object,
      required: true
  }
});
</script>

<style scoped>
.component-b {
  background-color: #ffffff;
  padding: 8px;
  border-radius: 4px;
}

/* 只读区域样式 */
.readonly {
  display: inline-block;
  min-width: 120px;
  border-bottom: 1px solid black; /* 添加下划线效果 */
  line-height: 25px; /* 确保内容垂直居中 */
  text-align: center; /* 水平居中 */
  cursor: default; /* 将光标设置为默认 */
}
</style>
